<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="__CSS__/lib/normalize.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/mui-3.6.1.min.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/search-two.css" />
    <link rel="stylesheet" href="__CSS__/my_pullrefresh.css" type="text/css">
    <title>我的收藏</title>
    <style type="text/css">
      .mui-table-view-cell{ border:0; background: none;}
      #location .mui-btn-red{ padding: 5px;}
      h4{
          margin: 0;
          font-size: 18px;
          font-size: 13px;
          color: #666;
          font-weight: normal;
          padding: 10px 10px 8px 10px;
      }
      .mui-table-view-cell{ height: initial; }
      .mg-45{ margin-top: 45px; }
      .fl-right{ float: right; }
      .blue{ color: #32B2FD }
      .color-red{ color: #fb5047;}
      .confirm{ font-size: 12px;color: #666; }
      .ufo-1{
        background-size: cover;
        width: 80px;
        height: 80px;
        margin: 7px;
      }
    </style>
</head>
<body>

  <header class="mui-content">
        <div class="top-bar mui-row">
            <div class="return mui-col-sm-2 mui-col-xs-2" onclick="location.href='/Wx/Index/index/r/my'"></div>
            <div class="top-middle mui-col-sm-8 mui-col-xs-8">
                  我的收藏
            </div>
            <div class="top-right mui-col-sm-2 mui-col-xs-2"></div>
        </div>
    </header>

  <h4 class="mg-45 mui-clearfix">当前区域商家<span class="fl-right"><span class="fl-right-count">{$local}</span>家</span></h4>
  <ul id="location" class="mui-table-view" >
    <foreach name="list" item="v">
      <if condition="$v['is_quyu']">
        <li id="li{$v['favoriteId']}" class="mui-table-view-cell mui-transitioning mui-selected">
            <div  class="mui-content-2 mui-slider-handle" style="transform: translate(0px, 0px);">
                  <div class="gg  mui-col-xs-3">
                      <div class="ufo-1" onclick="location.href='/Wx/Shop/shop/id/{$v['shopId']}'" style="background-image: url('/{$v['shopImg']}');"></div>
                  </div>
                  <div class="gg mui-col-sm-6 mui-col-xs-6">
                       <div class="yzg">{$v['shopName']}</div>
                       <div class="star" data-score="{$v['score']}">
                           <span class="setStart"></span>
                           <span>{$v['score']}</span>月售{$v['yue_xiaoliang']}份
                       </div>
                       <div class="y-time">预计送达时间: <span>{$v['deliveryCostTime']}</span>分钟 / <span>{$v['juli2']}</span></div>
                       <div class="b-you">
                           <img src="__IMG__/icon_baoyou@2x.png"/>满{$v['deliveryFreeMoney']}包邮
                       </div>
                  </div>
                  <div class="gg mui-col-sm-2 mui-col-xs-2">
                      <p class="qsf"><span class="q-sf">{$v['deliveryStartMoney']}</span>元起送</p>
                      <p class="psf"><span>{$v['deliveryMoney']}</span>元配送费</p>
                  </div>
            </div>
            <div class="mui-slider-right mui-disabled mui-selected">
              <a class="mui-btn mui-btn-red" onclick="delShop({$v['favoriteId']})" style="transform: translate(0px, 0px);">删除</a>
            </div>
        </li>
      </if>
    </foreach>
  </ul>

  <h4 class="mui-clearfix">其他区域商家
    <span class="blue">(离当前区域远，可能无法配送)</span>
    <span class="fl-right"><span  class="fl-right-count">{$unlocal}</span>家</span>
  </h4>
  <ul id="unLocation" class="mui-table-view" >
      <foreach name="list" item="v">
      <if condition="$v['is_quyu'] == 0">
        <li id="li{$v['favoriteId']}" class="mui-table-view-cell mui-transitioning mui-selected">
            <div  class="mui-content-2 mui-slider-handle" style="transform: translate(0px, 0px);">
                  <div class="gg  mui-col-xs-3">
                      <div onclick="location.href='/Wx/Shop/shop/id/{$v['shopId']}'"class="ufo-1" style="background-image: url('{$v['shopImg']}');"></div>
                  </div>
                  <div class="gg mui-col-sm-6 mui-col-xs-6">
                       <div class="yzg">{$v['shopName']}</div>
                       <div class="star" data-score="{$v['score']}">
                           <span class="setStart"></span>
                           <span>{$v['score']}</span>月售{$v['yue_xiaoliang']}份
                       </div>
                       <div class="y-time">预计送达时间: <span>{$v['deliveryCostTime']}</span>分钟 / <span>{$v['juli2']}</span></div>
                       <div class="b-you">
                           <img src="__IMG__/icon_baoyou@2x.png"/>满{$v['deliveryFreeMoney']}包邮
                       </div>
                  </div>
                  <div class="gg mui-col-sm-2 mui-col-xs-2">
                      <p class="qsf"><span class="q-sf">{$v['deliveryStartMoney']}</span>元起送</p>
                      <p class="psf"><span>{$v['deliveryMoney']}</span>元配送费</p>
                  </div>
            </div>
            <div class="mui-slider-right mui-disabled mui-selected">
              <a class="mui-btn mui-btn-red" onclick="delShop({$v['favoriteId']})" style="transform: translate(0px, 0px);">删除</a>
            </div>
        </li>
      </if>
    </foreach>
  </ul>
<script type="text/javascript" src="__JS__/jquery2.1.1.min.js"></script>
<script type="text/javascript" src="__JS__/mui-3.6.1.min.js"></script>
<script>

$(function(){
  $('.star').each(function(i,n){
    setScoreImg(n);
  })
})


/**
 * 服务星级评分
 */
function setScoreImg(obj){
  var temp = $(obj).data('score');
  var score = Math.floor(temp);
  var html='';
  for(var i=1;i<=5;i++){
      if(i<=score){
          html+='<img src="/Tpl/Wx/image/icon_star_1@2x.png" width="100%" height="100%">';
      }else if(temp*1+0.5>=i){
          html+='<img src="/Tpl/Wx/image/icon_star_05@2x.png" width="100%" height="100%">';
      }else{
          html+='<img src="/Tpl/Wx/image/icon_star_0@2x.png" width="100%" height="100%">';

      }
  }
  $(obj).find('.setStart').html(html);
}

function delShop(id){
    //<span class="color-red"></span>
    mui.confirm('<div class="confirm">确定要删除该收藏的商家吗？</div>','删除收藏',['取消','删除'],function(el){
        if(el['index']==1){
          delFav(id);
        }
    })
}

//取消收藏
function delFav(id){

  $.post('/Wx/Favorites/delFav', {id:id}, function(data){
    var $li = $('#li'+id);
    if(data['status']==1){
      var $count = $li.parent().prev().find('.fl-right-count');
      $count.html( $count.html()*1 - 1 );
      $li.remove();
    }
    mui.toast(data['msg']);
  })

}
</script>
</body>
</html>
